<template>
  <div class="loginbody">
    <div class="login">
      <div class="mylogin">
        <h1>董利超烧烤在线点餐系统</h1>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="0px"
        >
          <el-form-item label="" prop="phoneNum" style="margin-top: 10px">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-input
                  class="inps"
                  placeholder="请输入手机号"
                  v-model="loginFormData.mobile"
                >
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="" prop="checkCode">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-input
                  class="inps"
                  type="checkCode"
                  placeholder="请输入密码"
                  v-model="loginFormData.password"
                ></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item style="margin-top: 35px">
            <el-button
              type="primary"
              round
              class="submitBtn"
              @click="submitForm"
              >登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import countDown from "@/utils/countDown";
import { sendCheckCode, login } from "@/network/user";
import storage from "@/utils/storage";
import { useRouter } from "vue-router";
import { useCardStore } from "@/store";

const cardStore = useCardStore();
const loginFormData = ref({
  mobile: "",
  password: "",
});

const router = useRouter();

const { state: countdownAState, start: startTimeoutA } = countDown(60);
const countdownState = reactive(countdownAState);

const startCount = () => {
  sendCheckCode(loginFormData.value).then((res) => {
    if (res) {
      startTimeoutA();
    }
  });
};

const loginRules = ref({});

const submitForm = () => {
  login(loginFormData.value).then((res) => {
    console.log(res)
    const { userinfo, token } = res;
    storage.setItem("user", userinfo);
    storage.setItem("token", token);
    router.push({ path: "/" });
  });
};
</script>


<style scoped>
.loginbody {
  overflow: scroll;
  overflow-y: hidden;
  overflow-x: hidden;
}

.login {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-position: left top;
  background-color: #242645;
  color: #fff;
  font-family: "Source Sans Pro";
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.mylogin {
  width: 420px;
  height: 420px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
  text-align: center;
  background: linear-gradient(
    230deg,
    rgba(53, 57, 74, 0) 0%,
    rgb(0, 0, 0) 100%
  );
}

:deep(.el-form-item__content) {
  display: block;
}

.inps input {
  border: none;
  color: #fff;
  background-color: transparent;
  font-size: 12px;
}

.submitBtn {
  background-color: transparent;
  color: #39f;
  width: 380px;
}
</style>